import React, { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
// import { useRequest } from "ahooks";
// import { getUserInfo } from "../services/user";
import { UserOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { removeToken } from "../utils/user-token";
import { LOGIN_PATH } from "../router";
// 使用redux管理接口获取的用户信息
import useGetUserInfo from "../hooks/useGetUserInfo";
import { useDispatch } from "react-redux";
import { logoutReducer } from "../store/userReducer";

const UserInfo: FC = () => {
  const nav = useNavigate();
  const dispatch = useDispatch();
  // 获取用户信息
  // axios获取用户信息
  // const { data } = useRequest(getUserInfo);
  // const { username, nickname } = data || {};
  // 使用redux管理接口获取的用户信息
  const { username, nickname } = useGetUserInfo();

  // 退出登录
  function logout() {
    dispatch(logoutReducer()); //清空redux用户数据
    removeToken();
    nav(LOGIN_PATH);
  }
  // 显示用户信息
  const UserView = (
    <>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={logout}>
        退出
      </Button>
    </>
  );
  // 没有登录就显示‘登录’
  const LoginView = <Link to={"/login"}>登录</Link>;
  //////////////
  return <div>{username ? UserView : LoginView}</div>;
};

export default UserInfo;
